<template>
  <div class="withdraw">
    <div class="withdraw-header">
      <orderStatistics :myInfo ='myInfo'  @getData='getWithdrawData'/>
    </div>


    <el-table
      ref="tableRef"
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      @sort-change='tableSortChange'
      height="88%">
      <el-table-column show-overflow-tooltip label="ID" width="60" align="center">
        <template slot-scope="scope">{{(scope.$index+1)+(currentPage-1)*tableSize }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="代理人" align="center" prop='name' sortable='custom' min-width="100">
        <template slot-scope="scope">
          {{ scope.row.user ? scope.row.user.name : '' }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="手机号" align="center" prop='phone' sortable='custom' min-width="130">
        <template slot-scope="scope">
          {{ scope.row.user ? scope.row.user.phone : '' }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="提现金额(元)" align="center" prop='money' sortable='custom' min-width="130"></el-table-column>
      <el-table-column show-overflow-tooltip label="审核意见" align="left" prop='check_opinion' sortable='custom' min-width="110"></el-table-column>
      <el-table-column show-overflow-tooltip label="提现进度" align="center" prop='status' sortable='custom' min-width="110">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">审核中</span>
          <span v-else-if="scope.row.status == 1"> 打款中</span>
          <span v-else-if="scope.row.status == 2">已打款</span>
          <span v-else-if="scope.row.status == 3">驳回</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="申请时间" align="center" prop='created_at' sortable='custom' min-width="165"></el-table-column>
      <el-table-column show-overflow-tooltip label="更新时间" align="center" prop='updated_at' sortable='custom' min-width="165"></el-table-column>
      <el-table-column show-overflow-tooltip label="备注" align="left" prop='comment' sortable='custom'  min-width="150"></el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status == 0" @click="withdrawReview(scope.row)" type="warning" size="small">审核</el-button>
          <el-button v-if="scope.row.status == 1" @click="confirmPayment(scope.row)" type="success" size="small">确认打款</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
			:page-sizes="pageSizes"
      :page-size="Number(pageSize)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <withdrawReviewDialog ref="withdrawReviewDialog" @refresh='getWithdrawData'></withdrawReviewDialog>
  </div>
</template>

<script>
import withdrawReviewDialog from './components/withdrawReviewDialog'
import orderStatistics from "~/components/orderStatistics"
import { getMyInfo } from "~/api/user"
export default {
  data () {
    return {
      tableData: [],
      loading: false,
      pageSize: 25, //一页可以几条
      pageSizes: [25, 50], //一页可以几条,
      currentPage: 1, //目前在第几页
      current_page: 0,
      tableSize: 25, //一页几条
      total: 0,
      paramsByWithdraw: {
        user_type: 1,
        // status: '0,1'
      },
      myInfo: {
        drawing_agent_check : 0
      },
    }
  },
  components: {
    withdrawReviewDialog,
    orderStatistics
  },
  created () {
    this.getWithdrawData()
  },
  methods: {
    async getMyinfo (params) {
      let myInfo = await getMyInfo(this.$axios, params);
      if (myInfo.data.status == 'success') {
        this.$store.commit("setRoleInfo",myInfo.data.data)
        this.$store.commit("setUser",myInfo.data.data)
        this.myInfo = myInfo.data.data
        this.roleID = this.myInfo.role_id
      }
    },
    getWithdrawData (args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
      }
      params = {...params, ...this.paramsByWithdraw}
      console.log(args)
      if (args) {
        params = {...params, ...args}
      }
      console.log(params)
      this.$axios.get('api/drawing', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          this.tableData = res.data.data
          this.pageSize = res.data.page.per_page
          this.total = res.data.page.total
          this.getMyinfo()
        }
      })
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.paramsByWithdraw.page = 1
      this.getWithdrawData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.paramsByWithdraw.page = 1
      this.getWithdrawData()
    },
    tableSortChange (column) {
      if (column.order === 'descending') {
        this.paramsByWithdraw.sort_str = column.prop
        this.paramsByWithdraw.sort_order = 'desc'
      } else if (column.order === 'ascending'){
        this.paramsByWithdraw.sort_str = column.prop
        this.paramsByWithdraw.sort_order = 'asc'
      } else {
        delete this.paramsByWithdraw.sort_str
        delete this.paramsByWithdraw.sort_order
      }
      this.loading = true
      this.currentPage = 1
      this.getWithdrawData()
    },
    // 提现审核
    withdrawReview (data) {
      this.$refs.withdrawReviewDialog.show(data)
    },
    // 确认打款
    confirmPayment (data) {
      let params = {
        id: data.id
      }
      this.$confirm('是否确认打款！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        // type: 'warning'
      }).then(() => {
        this.$axios.post('api/drawing/finish', params).then( res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: "确认打款成功！"
            })
            this.getWithdrawData()
          } else if (res.data.code == 400) {
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .withdraw {
    height: 100%; //撑满表格
    .withdraw-header {
      margin-bottom: 20px;
    }
    .el-table {
      width: 99.9% !important;
    }
  }
</style>
